<template>
	<view class="search-topbar">
		<view class="search-topbar-left" @click="backTo">
			<u-icon name="arrow-left" color="#0c34ba" size="28"></u-icon>
			<view class="back-text">返回</view>
		</view>
		<view class="search">
			<u-search placeholder="请输入商品名称" :clearabled="false" class="search-topbar-middle" :bg-color="bgcolor" :search-icon-color ="searchiconcolor" action-text="取消" @custom="cancelSearch" v-model="searchContent" @change="startSearch"></u-search>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				bgcolor:"#F7F8FA",
				searchiconcolor:"#0c34ba",
				searchContent:null
			}
		},
		methods:{
			cancelSearch(value){
				this.searchContent = null
			},
			backTo(){
				uni.navigateBack({
				})
			},
			startSearch(value){
				this.$u.debounce(()=>{
					this.$emit("search",value)
				},700)
			}
		}
	}
</script>

<style scoped>
	.search-topbar{
		margin: 0rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 105rpx;
	}
	.search-topbar-left{
		display: flex;
		align-items: center;
		color: #0c34ba;
		width: 20%;
	}
	.search{
		width: 80%;
	}
	.search-topbar-middle{
		margin-left: 80rpx;
	}
</style>
